import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 自动导入 vue 中 hook reactive ref 等
import AutoImport from "unplugin-auto-import/vite";
//自动导入 ui-组件 比如说 ant-design-vue element-plus 等
import Components from "unplugin-vue-components/vite";
import path from "path";
// 主要用于 alias 文件路径别名
import { resolve } from "path";
//Elementplus插件
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //安装两行后你会发现在组件中不用再导入 ref，reactive 等
      imports: ["vue", "vue-router"],
      //存放的位置
      dts: "src/auto-import.d.ts",
    }),

    //elementplus按需导入配置
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
    Components({
      // 引入组件的,包括自定义组件
      // 存放的位置
      dts: "src/components.d.ts",
    }),
  ],

  server: {
    port: 8888, //指定开发服务器端口：默认 3000
    open: true, //启动时自动在浏览器中打开
    proxy: {
      //配置自定义代理规则
      // 字符串简写写法
      "/jpi": "http://192.168.1.97:4567",
      "/api": {
        target: "http://192.168.1.97:108",
        changeOrigin: true, //是否跨域
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

  resolve: {
    alias: {
      // 别名配置
      // 键必须以斜线开始和结束
      "@": resolve(__dirname, "src"),
      components: resolve(__dirname, "./src/components"),
      assets: resolve(__dirname, "./src/assets"),
      "#": resolve(__dirname, "types"),
      build: resolve(__dirname, "build"),
    },
    // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },

  //配置全局 scss
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
             @use "@/style/common.scss";
             @use "@/style/element/index.scss" as *;
           `,
      },
    },
  },
});
